import { Component } from 'react';
import ReactDOM from 'react-dom/client';

/* 
  React 调用时 this 指向问题:
    1. 原生JS知识点回顾：sayHi() {} 书写时不能绑定 this 指向，由调用时决定。
    2. 箭头函数，在声明时就绑定 this 的指向。
*/
class App extends Component {
  state = {
    msg: 'hello react',
  };

  // undefined
  handleClick = () => {
    console.log(this.state);
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

const obj = {
  name: 'zs',
  sayHi() {
    // 普通函数的写法，书写时并不能绑定 this 的指向
    console.log(this);
  },
};

// 由 obj 调用，this 指向 obj
obj.sayHi();
// 由定时器调用，this 指向 window
setTimeout(obj.sayHi, 1000);
// 由document调用，this 指向 document
document.addEventListener('click', obj.sayHi);

// 特别注意：通过 bind 可修改函数的 this ，如：修改为 undefined (屏蔽this)
const sayHi2 = obj.sayHi.bind(undefined);
sayHi2(); // 打印undefined
